<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>网页课程设计</title>
    <link href="./css/main.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body>
<div>
    <div class="app-head">
      <div class="app-head-inner">
        <img src="./images/logo.png">
        <div class="head-nav">
          <ul class="nav-list">
            <li>登录</li>
            <li class="nav-pile">|</li>
            <li>注册</li>
            <li class="nav-pile">|</li>
            <li>关于</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="app-content">
      <div class="index-wrap">
          <div class="index-left">
            <div class="index-left-block">
                <h2>每日一曲</h2>
                    <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=270 height=86 src="http://music.163.com/outchain/player?type=2&id=28481103&auto=1&height=66"></iframe> -->
                    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=270 height=340 src="http://music.163.com/outchain/player?type=0&id=469076527&auto=1&height=430"></iframe>
            </div>

            <div class="index-left-block">
              <h2>全部产品</h2>
                 <h3>PC产品</h3>
                 <ul>
                      <li><a href="#" id="">数据统计</a></li>
                      <li><a href="#" id="">数据预测</a></li>
                      <li><a href="#" id="">流量分析</a><span class="hot-tag">HOT</span></li>
                      <li><a href="#" id="">广告发布</a></li>
                 </ul>
                 <div class="hr"></div>
                 <h3>手机应用类</h3>
                 <ul>
                      <li><a href="#" id="">91助手</a></li>
                      <li><a href="#" id="">产品助手</a></li>
                      <li><a href="#" id="">智能地图</a><span class="hot-tag">HOT</span></li>
                      <li><a href="#" id="">团队语音</a></li>
                 </ul>
            </div>

            <div class="index-left-block lastest-news">
              <h2>最新消息</h2>
                  <ul>
                      <li><a href="#" id="">91助手</a></li>
                      <li><a href="#" id="">产品助手</a></li>
                      <li><a href="#" id="">智能地图</a><span class="hot-tag">HOT</span></li>
                      <li><a href="#" id="">团队语音</a></li>
                  </ul>
            </div>
          </div>

          <div class="index-right">

              <div class="index-board-list">
                  <div class="index-board-item index-board-car">
                      <div class="index-board-item-inner">
                          <h2>开放产品</h2>
                          <p>开放产品是一款开放产品</p>
                          <div class="index-board-button"><a href="#" class="button">立即购买</a></div>
                      </div>
                  </div>
                  <div class="index-board-item line-last index-board-loud">
                      <div class="index-board-item-inner">
                          <h2>开放产品</h2>
                          <p>开放产品是一款开放产品</p>
                          <div class="index-board-button"><a href="#" class="button">立即购买</a></div>
                      </div>
                  </div>
                  <div class="index-board-item index-board-earth">
                      <div class="index-board-item-inner">
                          <h2>开放产品</h2>
                          <p>开放产品是一款开放产品</p>
                          <div class="index-board-button"><a href="#" class="button">立即购买</a></div>
                      </div>
                  </div>
                  <div class="index-board-item line-last index-board-hill">
                      <div class="index-board-item-inner">
                          <h2>开放产品</h2>
                          <p>开放产品是一款开放产品</p>
                          <div class="index-board-button"><a href="#" class="button">立即购买</a></div>
                      </div>
                  </div>
              </div>

              <div class="work" id="work">

                        <div class="work">
                            <div class="bike-left">
                                <img src="./images/w-bycle.png" alt="">
                            </div>
                            <div class="bike-right">
                                <div class="lable">
                                    <img src="./images/w-icon.png" alt="">
                                    <h2>Vintage oliva</h2>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<i>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></i></p>
                                </div>
                                <div class="line">
                                    <img src="./images/line.png" alt="">
                                </div>
                                <div class="lable2">
                                <img src="./images/pic2.jpg" alt="">
                                </div>
                            </div>
                            <div class="clear"> </div>
                        </div>
                        <div class="clear"> </div>
                        <div class="work2">
                            <div class="work-left">
                                <div class="lable3">
                                    <img src="./images/w-icon2.png" alt="">
                                    <h3>Laboriosa</h3>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,but also the leap into electronic typesetting, remaining essentially unchanged .</span> </p>
                                </div>
                                <div class="line">
                                    <img src="./images/line.png" alt="">
                                </div>
                                    <div class="lable5">
                                        <img src="./images/pic3.jpg" alt="">
                                    </div>
                            </div>
                            <div class="work-right">
                                <img src="./images/w-bycle2.png" alt="">
                            </div>
                            <div class="clear"> </div>
                    </div>
                    <div class="work3">
                        <div class="w3-left">
                                <img src="./images/w-sidebycle.png" alt="">
                        </div>
                        <div class="work-middle">
                                <div class="lable4">
                                    <img src="./images/w-icon3.png" alt="">
                                    <h3>Retro bike-m.hulot</h3>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <i>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span>but also the leap into electronic typesetting, remaining essentially unchanged .</span></i> </p>
                                </div>
                                <div class="line">
                                    <img src="./images/line.png" alt="">
                                </div>
                                <div class="lable6">
                                        <img src="./images/pic4.jpg" alt="">
                                    </div>
                            </div>
                                <div class="w3-right">
                                <img src="./images/w-sidebike2.jpg" alt="">
                                </div>
                        <div class="clear"> </div>
                    </div>
              </div>
          </div>
      </div>
    </div>
    <div class="app-foot">
      <p>© 2017 睡沙发的沙皮狗   to  查世敏</p>
    </div>
</div>

</body>
</html>